<template>
  <div class="container">
    <div class="header">
      <el-input
        v-model="search"
        placeholder="请输入"
        style="width: 220px; margin-right: 10px"
        clearable
        @keyup.enter="getUserList()"
        @clear="getUserList()"
      ></el-input>
      <el-button type="primary" @click="getUserList()">检索</el-button>
      <el-button type="success" :icon="Plus" @click="addUser">新建</el-button>
    </div>
    <div class="main">
      <el-table
        ref="userTableRef"
        v-loading="loading"
        :data="user_list"
        stripe
        height="calc(100% - 20px)"
      >
        <el-table-column prop="username" label="用户">
          <template #default="{ row }">
            <el-avatar
              class="user-avatar"
              :size="50"
              :src="row.avatar ? `/api${row.avatar}` : avatar"
            />
            <span>{{ row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="身份">
          <template #default="{ row }">
            {{ roles[row.role] }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button type="primary" @click="editUser(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <MyPagination :total="total" @page-change="currentPage"></MyPagination>
    </div>

    <UserDialog
      v-model:visible="userVisible"
      :mode="mode"
      :user_id="user_id"
      :form="userForm"
      @getUserList="getUserList"
    ></UserDialog>
  </div>
</template>

<script setup lang="ts">
import { getUserListApi, createUserApi, updateUserApi } from '@/api/user'
import { ref, reactive, onMounted, nextTick } from 'vue'
import type { UserForm, UserInfo } from '@/types/user'
import UserDialog from './components/UserDialog.vue'
import { roles } from '@/utils/enum'
import { Plus } from '@element-plus/icons-vue'
// require('@/assets/image/avatar.png')
// 单文件引入
// import avatar from '@/assets/image/avatar.png'
// 多文件引入
import { getAssetsFile } from '@/utils/imageUrl'
import type { FormInstance, FormRules, TableInstance } from 'element-plus'
const avatar = getAssetsFile('avatar.png')

const search = ref('') // 查询字段
const userVisible = ref(false) // 用户弹框
const loading = ref(false)
const user_list = ref() // 用户列表
const total = ref(0)
const page = ref(1)
const mode = ref(0) // 0创建 1编辑
const userTableRef = ref<TableInstance>()
//  表单数据
const userForm = reactive<UserForm>({
  username: '',
  avatar: '',
  remark: '',
  role: 2
})
let user_id: number = 0 // 当前操作用户id

onMounted(() => {
  getUserList()
})

// 获取用户列表
const getUserList = async (scroll = true) => {
  try {
    loading.value = true
    const params = {
      search: search.value,
      page: page.value
    }
    const res = await getUserListApi(params)
    user_list.value = res.result.data
    total.value = res.result.count
    // 重置滚动条
    if (scroll)
      nextTick(() => {
        userTableRef.value?.setScrollTop(0)
      })

    loading.value = false
  } catch (_) {
    loading.value = false
  }
}

const addUser = () => {
  mode.value = 0
  userVisible.value = true
}

const editUser = (row: UserInfo) => {
  mode.value = 1
  userVisible.value = true
  const { username, id, role, remark, avatar } = row
  user_id = id
  nextTick(() => {
    Object.assign(userForm, { username, role, remark, avatar })
  })
}

const currentPage = (active_page: number) => {
  page.value = active_page
  getUserList()
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/frame.scss';

.user-avatar {
  vertical-align: middle;
  margin-right: 10px;
}
</style>
